<script setup lang="ts">
import { getXyjListApi, type KpcodeLuckyParamEntityItem } from '@/api/xyj'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
import NoList from '@/components/NoList.vue'

const xyjLisst = ref<KpcodeLuckyParamEntityItem[]>()
const getXyjList = async () => {
  const res = await getXyjListApi()
  xyjLisst.value = res.data
  xyjLisst.value.map(item => {
    if (item.areaName) {
      let nameArr = item.areaName?.split('/')
      item.areaName = nameArr[2]
    } else {
      item.areaName = '不限区域'
    }
  })
}
const isShow = ref(false)
onLoad(() => {
  getXyjList()
})
</script>

<template>
  <view class="top">
    <navigator class="home" url="/pages/index/index">
      <uni-icons type="left" size="15" color="#fff"></uni-icons><text>首页</text>
    </navigator>
    <image src="@/static/images/xyj-top_01.jpg" mode="aspectFill" />
  </view>
  <view class="content">
    <view class="info_box">
      <div class="top_title">
        <text>幸运奖奖项设置的相关说明</text>
        <text class="btn" @tap="isShow = !isShow">{{ isShow ? '收起' : '展开' }}</text>
      </div>
      <view class="info_content" v-show="isShow">
        规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则规则
      </view>
    </view>
    <text class="title">幸运奖活动计划</text>
    <view class="list_box" v-if="xyjLisst && xyjLisst.length > 0">
      <view class="list">
        <!-- <view class="info_title">
          <view class="jiangqi">每周二、四、六开奖</view>
          <view class="time">开奖时间：17:00</view>
        </view> -->
        <view class="info_part info_top">
          <view class="area">区域</view>
          <view class="right">
            <view class="qishu">开展期数</view>
            <view class="num">每期数量</view>
            <view class="cash">单个奖金</view>
          </view>
        </view>
        <view class="info_part" v-for="item in xyjLisst" :key="item.id">
          <view class="area">{{ item.areaName }}</view>
          <view class="right">
            <view class="qishu">{{ item.maxPeriodsNo }}</view>
            <view class="num">{{ item.winningNo }}</view>
            <view class="cash">{{ item.winningPrize }}</view>
            <view class="time">开奖时间：{{ item.startTime!.substring(0, 10) }} - {{ item.endTime!.substring(0, 10) }}</view>
          </view>
        </view>
      </view>
    </view>
    <no-list v-else />
  </view>
</template>

<style scoped lang="scss">
.info_box {
  padding: 10px;
  background-color: #fee9d3;
  border: 3px solid #fdc49a;
  border-radius: 10px;
  margin: 15px 10px;
  .top_title {
    font-size: 14px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .btn {
      font-weight: normal;
    }
  }
  .info_content {
    padding: 15px 0 0;
    line-height: 1.5em;
    font-size: 12px;
  }
}
.top {
  overflow: hidden;
  position: relative;
  .home {
    position: absolute;
    top: 50px;
    left: 20px;
    color: #fff;
    font-size: 14px;
    width: 70px;
    height: 28px;
    background-color: rgba($color: #000000, $alpha: 0.3);
    border-radius: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: 2px;
    text {
      margin-left: 2px;
    }
  }
  image {
    width: 100%;
    height: 210px;
    float: left;
  }
  .guize_btn {
    position: absolute;
    left: 50%;
    bottom: 20px;
    width: 100px;
    height: 36px;
    color: #fff;
    background-color: #ff3d3b;
    font-size: 14px;
    z-index: 19;
  }
}
.content {
  background-color: #fd674c;
  height: calc(100vh - 210px);
  overflow-y: scroll;
  .title {
    display: block;
    color: #fff;
    font-size: 40rpx;
    text-align: center;
    padding: 15px 0;
  }
  .list_box {
    background-color: #fff;
    border: 8px solid #fdc49a;
    border-radius: 20px;
    margin: 0 10px;
    font-size: 26rpx;
    .list {
      margin-bottom: 10px;
      margin-top: 10px;
      .info_title {
        background-color: #fee9d3;
        display: flex;
        justify-content: space-between;
        padding: 8px 10px;
        border-radius: 5px 5px 0 0;
        margin: 5px 5px 0;
        color: #333;
      }
      .info_part {
        padding: 0 5px;
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        view {
          width: 33.3333%;
          text-align: center;
          border-left: 1px solid #fee9d3;
          border-bottom: 1px solid #fee9d3;
          justify-content: space-between;
          padding: 6px 0;
          height: 30px;
          color: #666;
        }
        .right {
          width: 70%;
          height: 60px;
          display: flex;
          flex-wrap: wrap;
          padding: 0;
          justify-content: flex-start;
          border-left: 1px solid #fee9d3;
        }
        .qishu {
          border-left: none;
        }
        .area {
          width: 30%;
          height: 60px;
          border-right: none;
          display: flex;
          align-items: center;
          justify-content: center
        }
        .time {
          width: 99.9999%;
          border-left: none;
          font-size: 22rpx;
        }
        view:last-of-type {
          border-right: 1px solid #fee9d3;
        }
      }
      .info_top {
        .right {
          height: 30px;
          border-top: 1px solid #fee9d3;
        }
        .area {
          height: 30px;
          border-top: 1px solid #fee9d3;
        }
        .qishu, .num, .cash {
          border-bottom: none;
        }
      }
    }
  }
}
</style>
